<template>
	<div>
		<Header></Header>
		<Cover :title="title" img="cover.png"></Cover>
		<div id="content"></div>
		<Footer></Footer>
	</div>
</template>

<script scoped>
import axios from '../config/http';
export default {
	name: 'Article',
	components: {
		Cover: () => import('@/components/Cover.vue'),
		Header: () => import("@/components/Header.vue"),
    Footer: () => import("@/components/Footer.vue")
	},
	data() {
		return {
			title: ''
		};
	},
	methods: {
		async loadData() {
			console.log(this.$route.query);
            let articleId = this.$route.query.id;
            let articleType = this.$route.query.type;
			let res = await axios.get(`/is/${articleType}/${articleId}`);
			this.title = res.data.data.name;
			let content = document.getElementById('content');
			content.innerHTML = res.data.data.desc;
		},
	},
	created() {
		this.loadData();
	}
}
</script>

<style>
#content {
	margin: 0 10%;
	padding: 20px;
	font-size: 14px;
	line-height: 1.5;
	color: #333;
	text-align: justify;
}

@media screen and (max-width: 768px) {
	#content {
		padding: 10px;
		font-size: 16px;
	}
}
</style>
